<template>
	<view>
		<!-- <person-information></person-information> -->
	
		<view style="padding: 15px; color: #fff;">
			<view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view style="display: flex;align-items: center;">
						<view style="background-color: #d9d9d9;border-radius: 50%; width: 35px;height: 35px;">
							<image :src="user.headimgUrl?user.headimgUrl:'/static/img/Telegram.png'" style="width: 35px;height: 35px; border-radius: 50%; "></image>
						</view>
						<view style="margin-left: 10px; font-size: 14px;">{{user.userName}}</view>
					</view>
					<view style="width: 30%; display: flex;justify-content: space-between;">
						<view class="center" style="border: 1px solid #C1E3FF33; width: 41px;height: 41px;border-radius: 10px;">
							<image style="width: 24px;height: 24px;" src="/static/img/message-question-circle.png"></image>
						</view>
						<view @click="walletOpenHandel" class="center" style="border: 1px solid #C1E3FF33; width: 41px;height: 41px;border-radius: 10px;">
							<image style="width: 24px;height: 24px;" src="/static/img/wallet-02.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view style="border-radius: 10px;background: #546C7F33;height: 87px; margin-top: 10px;">
				<view style="padding: 15px; text-a">
					<view style="font-size:13px;color:#BDBDBD;text-align: center;">Your Points</view>
					<view style="display: flex;align-items: center;justify-content: center;margin-top: 10px;">
						<image style="width: 20px;height: 20px;" src="../../../../static/img/Group 1.png"></image>
						<view style="margin-left: 10px; font-size: 14px;color:#C1E3FF">{{user.points}}</view>
					</view>
				</view>
			</view>
		</view>
		<ranking-list :list="ranking"></ranking-list>
		<!-- 新建钱包账号 start -->
		<uni-popup
			width="100%"
			ref="walletStatu"
			 background-color="#1B2025"
			 bottom
			 type="bottom"
			 borderRadius="10px 10px 0 0"
			 @change="change">
			<view class="popup-content">
				 <view class="title">
				 	<view class="title_name">Deposit Wallet</view>
					<view class="title_icon" @click="$refs.walletStatu.close()" >
						X
					</view>
				 </view>
				<view class="input_name">
					Enter your Base chain wallet address to receive $DAWG airdrop
				</view>
				<input class="uni-input" v-model="walletUrl" focus placeholder="Automatically gain focus" />
				<button @click="walletCloseHandel" class="sbumit_bnt" size="default" type="default"
					hover-class="is-hover">Send Link</button>
			</view>
		</uni-popup>
		<!-- 新建钱包账号 end -->
		<!-- 钱包账号列表 start -->
		<uni-popup
			width="100%"
			ref="walletList"
			 background-color="#1B2025"
			 bottom
			 type="bottom"
			 borderRadius="10px 10px 0 0"
			 @change="change">
			<view class="popup-content">
				 <view class="title">
				 	<view class="title_name">Deposit Wallet</view>
					<view class="title_icon" @click="$refs.walletList.close()" >
						X
					</view>
				 </view>
				<view class="input_name">Choose your wallet to receive airdrop</view>
				<view class="list_name">
					<view class="list_item" v-for="item in 12" :key="item">Metamask</view>
				</view>
			</view>
		</uni-popup>
		<!-- 钱包账号列表 end -->
	</view>
</template>

<script>
	import {request} from '@/api/api.js'
	import personInformation from '@/components/personInforma.vue'
	import rankingList from '@/components/rankingList.vue'
	import rankingData from '@/static/data.js'
	export default {
		components:{
			personInformation,
			rankingList
		},
		data() {
			return {
				ranking:[],
				user:{},
				
			}
		},
		onLoad() {
			this.rankingGetData()
		},
		mounted() {
			this.taskGetData()
			this.leaderboard()
		},
		methods: {
			// 获取用户信息接口
			taskGetData(){
				request({url:'/userinfo',method: 'GET',}).then(res => {
					console.log('res',res)
					if(res.code == 200){
						this.user = res.data
					}
				})
			
			},
			leaderboard(){
				 request({url:'/leaderboard/list',method:'GET'}).then(res => {
					 console.log('fsfs',res)
					 if(res.code == 200 ){
						 this.ranking = res.data
					 }
				 })
			},
			walletOpenHandel(){
				this.$refs.walletStatu.open()
			},
			walletCloseHandel(){
				request({url:'/walletinfo',method:'POST',data:{walletUrl:this.walletUrl}}).then(res => {
					console.log('res',res)
					this.walletUrl = ''
					this.$refs.walletStatu.close()
				})
			},
			walletListHandel(){
				this.$refs.walletList.open()
			},
			walletListCloseHandel(){
				this.$refs.walletList.close()
			},
			// 排名接口
			rankingGetData(){
				uni.request({
				    url: 'http://open.zhimulp.online/jump/leaderboard/list',// 你的API地址
					header:{
						'Authorization':"853004962065444bb0195f6c9ab57644"
					},
					method: 'GET',
				    success: (res) => {
				        this.ranking = res.data
				    },
				    fail: (err) => {
				        console.error('GET请求失败：', err);
				    }
				});
			}
		}
	}
</script>

<style>
.popup-content{
		width: calc(100% - 40px);
		overflow: auto;
		margin: 0 auto;
		.title{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.title_name{
				height: 40px;
				line-height: 40px;
				padding: 10px 0;
				font-family: Inter;
				font-size: 26px;
				font-weight: 600;
				line-height: 40px;
				text-align: left;
	
	
			}
			.title_icon{
				width: 20px;
				height: 20px;
				margin: 20px 0;
				display: flex;
				justify-items: end;
				text-align: center;
			}
		}
		.input_name{
			width: 100%;
			font-family: Inter;
			font-size: 15px;
			font-weight: 500;
			line-height: 22px;
			letter-spacing: -0.4000000059604645px;
			text-align: left;
			margin-bottom: 20px;
		}
		.list_name{
			width: 100%;
			height: 60vh;
			.list_item{
				width: calc(100% - 100px);
				margin: 10px auto;
			}
		}
		.uni-input{
			width: calc(100% - 20px);
			height: 40px;
			background-color: rgba(255, 255, 255, 0.16);
			border-radius: 5px;
			padding:5px 10px;
			margin-bottom: 20px;
		}
		.sbumit_bnt{
			color: #000;
			background-color:  rgba(246, 203, 35, 1);
			border-color: rgba(246, 203, 35, 1);
			margin-bottom: 50px;
			margin-top: 50px;
			font-family: Inter;
			font-size: 17px;
			font-weight: 600;
			text-align: center;
	
		}
	}
</style>
